<template>
  <div class="posRelative" style="height: 100%;">
      <!-- <form action="http://localhost/rdms/php/public/index.php/admin/resume/uploadUserPics" enctype="multipart/form-data" method="post">
        <input type="file" name="image[]" /> <br> 
        <input type="file" name="image[]" /> <br> 
        <input type="file" name="image[]" /> <br> 
        <input type="submit" value="上传" /> 
        </form>  -->
    <!-- 用户头像 -->
    <img :src="getPhotoPath === '' ? require('../assets/images/noPhoto.jpg') : getPhotoPath" class="avatarSmall" :key = "2">
    <!-- 头部基本信息 -->
    <el-row>
      <el-col :span="24">
        <header-top></header-top>
      </el-col>
    </el-row>
    <!-- logo -->
    <el-row>
      <el-col :span="24">
          <logo-top></logo-top>
      </el-col>
    </el-row>
    <!-- 主导航 -->
    <el-row>
      <el-col :span="24">
        <user-main-nav key = 1></user-main-nav>
      </el-col>
    </el-row>
    <!-- 面包屑 -->
    <div class="breadWrapper">
      <el-row>
        <el-col :span="22">
          <el-breadcrumb separator-class="el-icon-arrow-right" separator="/">
              <!-- <template v-if="firstMenu !== ''"> -->
                  <!-- <el-breadcrumb-item >{{firstMenu}}</el-breadcrumb-item> -->
                    <template v-for="(item,index) of breadList" :index="index">
                        <!-- <router-link :to="item.path">{{item.name}} - {{item.path}}</router-link> -->
                        <!-- <router-link :to="item.path">{{item.name}} - {{item.path}}</router-link> -->
                        <el-breadcrumb-item v-if="item.meta.topMenu !== undefined" :key="index" >{{item.meta.topMenu}}</el-breadcrumb-item>
                        <el-breadcrumb-item :key="index" >{{item.name}}</el-breadcrumb-item>
                    </template>
              <!-- </template> -->
              <!-- <template v-else>
                  <el-breadcrumb-item v-for="(item,index) of breadList" :key="index" :index="index">
                        {{item.name}}
                    </el-breadcrumb-item>
              </template> -->
          </el-breadcrumb>
        </el-col>
        <el-col :span="2" class="closePageWrapper">
            <icon name="closePage" class="scaleIcon1 closePage" @click.native.stop="returnBack" v-show="isShowCloseIcon"></icon>
        </el-col>
      </el-row>

    </div>

  <!-- 表格 -->
    <el-row>
      <el-col :span="24">
          <div class="grid-content bg-purple-light">
            <el-col :span="24">
              <transition name="fade" mode="out-in" appear>
                <router-view></router-view>
              </transition>
            </el-col>
          </div>
      </el-col>

    </el-row>
  </div>
</template>

<script>
  import http from '../assets/js/http'
  import Cookies from 'js-cookie'
  import _g from '@/assets/js/global'
  import config from '@/assets/js/config.js'

   import headerTop from '@/components/Common/headerTop.vue'
   import logoTop from '@/components/Common/logoTop.vue'
      
//    import headerTop from '@/components/guest/Common/headerTop.vue'
//    import logoTop from '@/components/guest/Common/logoTop.vue'
//    import userMainNav from '@/components/guest/Common/userMainNav.vue'
    import userMainNav from '@/components/Common/userMainNav.vue'

   import { mapGetters } from 'vuex'

  
  export default {
    data() {
      return {

        firstMenu : '',//..顶层菜单名字
        breadList:[],                                                                       //  面包屑
        isMenuLevel:'',                                                                 //..上级菜单在下拉菜单中的级别
        isShowCloseIcon : false,//  默认隐藏关闭XX图标

        username: '',
        childMenu: [],
        menuData: [],
        hasChildMenu: false,
        menu: null,
        module: null,
        img: '',
        title: '',
        logo_type: null,
        a:'',
      }
    },
    mounted () {
    },
    methods: {
    /* 测试SSE */
    testSSE(){
        let ws = new WebSocket("ws://127.0.0.1:2346");
        ws.onopen = function() {
            alert("连接成功");
            ws.send('tom');
            alert("给服务端发送一个字符串：tom");
        };
        ws.onmessage = function(e) {
            alert("收到服务端的消息：" + e.data);
        };
    },
    /* 返回上一页 */
    returnBack(){
        this.$router.go(-1)
    },
      logout() {

        this.$confirm('确认退出吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          _g.openGlobalLoading()
          let data = {
            authkey: Lockr.get('authKey')
          }
          this.apiPost('admin/base/logout', data).then((res) => {
            _g.closeGlobalLoading()
            this.handelResponse(res, (data) => {
              Lockr.rm('authKey')
              Lockr.rm('expire')
              Lockr.rm('rememberKey')
              Cookies.remove('rememberPwd')
              Cookies.remove('roles')
              _g.toastMsg('success', '退出成功')
              setTimeout(() => {
                this.$router.replace('/')
              }, 1500)
            })
          })
        }).catch(() => {
  
        })
      },
      switchTopMenu(item) {
        if (!item.child) {
          this.$router.push(item.url)
        } else {
          this.$router.push(item.child[0].child[0].url)
        }
      },
      handleMenu(val) {
        switch (val) {
          case 'logout':
            this.logout()
            break
          case 'changePwd':
            this.changePwd()
            break
        }
      },
      changePwd() {
        this.$refs.changePwd.open()
      },
      getTitleAndLogo() {
        this.apiPost('admin/base/getConfigs').then((res) => {
          this.handelResponse(res, (data) => {
            document.title = data.SYSTEM_NAME
            this.logo_type = data.LOGO_TYPE
            this.title = data.SYSTEM_NAME
            this.img = config.HOST + data.SYSTEM_LOGO
          })
        })
      },
      getUsername() {
        this.username = this.$store.state.users.username
      }
    },
    created() {
        // this.testSSE()
      // this.getTitleAndLogo()
      // let authKey = Lockr.get('authKey')
      // if (!authKey) {
      //   _g.toastMsg('warning', '您尚未登录')
      //   setTimeout(() => {
      //     this.$router.replace('/')
      //   }, 1500)
      //   return
      // }
      // this.getUsername()
      // let menus = this.$store.state.menus
      // this.menu = this.$route.meta.menu
      // this.module = this.$route.meta.module
      // _(menus).forEach((res) => {
      //   if (res.module == this.module) {
      //     this.menuData = res.child
      //     res.selected = true
      //   } else {
      //     res.selected = false
      //   }
      // })
    },
    computed: {
        ...mapGetters([                                                                         
            'getPhotoPath','getIsAdmin'
        ]),
      routerShow() {
        return this.$store.state.routerShow
      },
      showLeftMenu() {
        this.hasChildMenu = this.$store.state.showLeftMenu
        return this.$store.state.showLeftMenu
      }
    },
    components: {

      headerTop,
      logoTop,
      userMainNav
    },

    beforeRouteEnter(to,from, next) {

        next((vm) => {
            // vm.breadList = to.meta.titles;
            // vm.isMenuLevel = to.meta.menuLevel
            vm.breadList = vm.$route.matched

            console.log('breadList = ',vm.breadList)

            if(vm.$route.matched[0].meta.topMenu !== undefined){
                vm.firstMenu = vm.$route.matched[0].meta.topMenu
            }else{
                vm.firstMenu = ''
            }
            vm.isShowCloseIcon = vm.$route.matched[vm.$route.matched.length - 1].meta.isShowCloseIcon
        });
      },
    watch: {
        // 监听路由变化
      '$route' (to, from) {
        //   console.log('****1 = ',this.$route.matched)
        //   this.breadList = to.meta.titles
        this.breadList = this.$route.matched
// console.log('to = ',to)
        if(to.matched[0].meta.topMenu !== undefined){
            this.firstMenu = to.matched[0].meta.topMenu
        }else{
            this.firstMenu = ''
        }

        // if(this.$route.matched[0].meta.topMenu !== undefined){
        //     this.firstMenu = this.$route.matched[0].meta.topMenu
        // }
        this.isShowCloseIcon = this.$route.matched[this.$route.matched.length - 1].meta.isShowCloseIcon

        //   this.isMenuLevel = to.meta.menuLevel
        //   console.log('isMenuLevel = ', this.isMenuLevel)
        // _(this.$store.state.menus).forEach((res) => {
        //   if (res.module == to.meta.module) {
        //     res.selected = true
        //     if (!to.meta.hideLeft) {
        //       this.menu = to.meta.menu
        //       this.menuData = res.child
        //     }
        //   } else {
        //     res.selected = false
        //   }
        // })
      },
      deep:true
    },
    mixins: [http]
  }
</script>

<style>
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity .5s
  }
  
  .fade-enter,
  .fade-leave-active {
    opacity: 0
  }
  
  .panel {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
  }
  
  .panel-top {
    height: 60px;
    line-height: 60px;
    background: #1F2D3D;
    color: #c0ccda;
  }
  
  .panel-center {
    background: #324057;
    position: absolute;
    top: 60px;
    bottom: 0px;
    overflow: hidden;
  }
  
  .panel-c-c {
    background: #f1f2f7;
    position: absolute;
    right: 0px;
    top: 0px;
    bottom: 0px;
    left: 220px;
    overflow-y: scroll;
    padding: 20px 20px 0;
  }
  
  .logout {
    background: url(../assets/images/logout_36.png);
    background-size: contain;
    width: 20px;
    height: 20px;
    float: left;
  }
  
  .logo {
    width: 150px;
    float: left;
    margin: 10px 10px 10px 18px;
  }

.avatarSmall {
    /* width: 72px; */
    width: 52px;
    height: 72px;
    display: block;
    border: 1px solid #ccc;
    position: absolute;
    top: 50px;
    right: 20px;
} 

  
  .tip-logout {
    float: right;
    margin-right: 20px;
    padding-top: 5px;
    cursor: pointer;
  }
  
  .admin {
    color: #c0ccda;
    text-align: center;
  }
  
  .hide-leftMenu {
    left: 0px;
  }
  
  .aside {
    width: 220px !important;
    height: 100%;
    overflow-y: scroll !important;
  }
</style>


